<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕宽度检测器</title>
    <style>
        :root {
            --primary-color: #2196F3;
            --bg-light: #f8f9fa;
            --text-dark: #212121;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Segoe UI', system-ui;
            background: var(--bg-light);
            transition: background 0.3s ease;
        }

        .container {
            width: 90%;
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        .info-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .info-card {
            padding: 1rem;
            background: #f5f5f5;
            border-radius: 12px;
            text-align: center;
        }

        .value {
            font-size: 1.5em;
            font-weight: 600;
            color: var(--primary-color);
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        button {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 25px;
            background: var(--primary-color);
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(33,150,243,0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>屏幕尺寸实时检测</h2>
        
        <div class="info-panel">
            <div class="info-card">
                <div>窗口宽度</div>
                <div id="win-width" class="value">--</div>
            </div>
            <div class="info-card">
                <div>文档宽度</div>
                <div id="doc-width" class="value">--</div>
            </div>
            <div class="info-card">
                <div>设备像素比</div>
                <div id="pixel-ratio" class="value">--</div>
            </div>
        </div>

        <div class="btn-group">
            <button onclick="updateAll()">立即检测</button>
            <button onclick="toggleAutoUpdate()">自动刷新</button>
        </div>
    </div>

<script>
    // 核心获取函数
    function getScreenDimensions() {
        return {
            windowInner: window.innerWidth,
            windowOuter: window.outerWidth,
            documentWidth: document.documentElement.clientWidth,
            documentScroll: document.documentElement.scrollWidth,
            pixelRatio: window.devicePixelRatio
        };
    }

    // 更新显示函数
    function updateDisplay(data) {
        document.getElementById('win-width').textContent = `${data.windowInner}px`;
        document.getElementById('doc-width').textContent = `${data.documentWidth}px`;
        document.getElementById('pixel-ratio').textContent = data.pixelRatio.toFixed(2);
        
        // 根据宽度动态修改样式
        if(data.windowInner < 768) {
            document.body.style.background = '#e3f2fd';
        } else {
            document.body.style.background = 'var(--bg-light)';
        }
    }

    // 初始化检测
    let autoUpdate = false;
    updateAll();

    // 立即检测按钮
    function updateAll() {
        const dimensions = getScreenDimensions();
        updateDisplay(dimensions);
    }

    // 自动刷新控制
    function toggleAutoUpdate() {
        autoUpdate = !autoUpdate;
        if(autoUpdate) {
            const interval = setInterval(() => {
                if(!autoUpdate) clearInterval(interval);
                updateAll();
            }, 500);
        }
    }

    // 实时监听窗口变化
    window.addEventListener('resize', () => {
        if(autoUpdate) updateAll();
        
        // 响应式布局示例
        const width = window.innerWidth;
        document.documentElement.style.setProperty(
            '--primary-color', 
            width < 768 ? '#FF5722' : '#2196F3'
        );
    });
</script>
</body>
</html>